<template>
  <div>
   <!-- <tt-header :options="headerInfo" :middlebarWidth="1170"></tt-header>-->
    <div class="bui-box container">
      <div class="bui-left index-left">
        <share-box :shareUrl="shareInfo.shareUrl" :commentCount="shareInfo.commentCount" :abstract="shareInfo.abstract"></share-box>
      </div>
      <div class="bui-left index-middle">
        <article-box :articleInfo="articleInfo"></article-box>
        <div class="bd-bottom-1" ad-cursor name="adetail_main*bottom_1" id="J_ad_baidu_bottom"></div>
        <detail-comment :userInfo="userInfo" :commentInfo="commentInfo"></detail-comment>
        <detail-feed :feedInfo="feedInfo"></detail-feed>
      </div>
      <div class="bui-right index-right" ref="rightModule">
        <user-card :pgcInfo="pgcInfo" :mediaInfo="mediaInfo"></user-card>
        <div class="right-top-1 right-img" name="adetail_right*top_1_zy"></div>
        <hot-words></hot-words>
        <div class="right-top-2 right-img" name="adetail_right*top_2_zy"></div>
        <!-- 热门视频 -->
        <hot-videos :count="7" title="热门视频"></hot-videos>
        <div class="right-top-3 right-img" name="adetail_right*top_3_zy"></div>
        <!-- 精彩图片 -->
        <hot-images :count="8" title="精彩图片"></hot-images>
        <div class="right-top-4 right-img"  name="adetail_right*top_4_zy"></div>
        <div id="imagindexhover" ref="hoverAdWrap">
          <div class="right-hover-1 right-img" name="adetail_right*hover_1_zy" ref="hoverAd"></div>
        </div>
      </div>
    </div>
    <tool-bar></tool-bar>
  </div>
</template>

<script>
  import TtHeader from 'byted-toutiao-pc-business-components/components/header'
  import ToolBar from 'byted-toutiao-pc-business-components/components/toolbar'
  import HotWords from 'byted-toutiao-pc-business-components/components/hotwords'
  import HotVideos from 'byted-toutiao-pc-business-components/components/hotvideos'
  import HotImages from 'byted-toutiao-pc-business-components/components/hotimages'
  import { elOffset, getScrollTop } from 'byted-toutiao-pc-business-components/src/js/utils'
  import throttle from 'lodash/throttle'
  import DetailFeed from '../../components/detailFeed'
  import DetailComment from '../../components/detailComment'
  import ArticleBox from '../../components/articleBox'
  import ShareBox from '../../components/shareBox'
  import UserCard from '../../components/userCard'

  const BASE_DATA = window.BASE_DATA

  export default {
    name: 'app',
    data () {
      return {
        userInfo: BASE_DATA.userInfo,
        headerInfo: BASE_DATA.headerInfo,
        articleInfo: BASE_DATA.artilceInfo,
        commentInfo: BASE_DATA.commentInfo,
        feedInfo: BASE_DATA.feedInfo,
        shareInfo: BASE_DATA.shareInfo,
        pgcInfo: BASE_DATA.pgcInfo,
        mediaInfo: BASE_DATA.mediaInfo
      }
    },
    mounted () {
      this._hoverAdHandle()
    },
    methods: {
      _hoverAdHandle () {
        // 悬浮广告处理
        let rightModuleTop = elOffset(this.$refs.rightModule).top
        window.addEventListener('scroll', throttle(() => {
          let rightModuleHeight = this.$refs.rightModule.clientHeight
          let scrollTop = getScrollTop(window)
          if (!this.$refs.hoverAd.getAttribute('done')) return
          if (rightModuleTop + rightModuleHeight > scrollTop) {
            this.$refs.hoverAdWrap.style['display'] = 'none'
          } else {
            this.$refs.hoverAdWrap.style['display'] = 'block'
          }
        }, 100), false)
      }
    },
    components: {
      TtHeader,
      ToolBar,
      HotWords,
      ArticleBox,
      DetailFeed,
      DetailComment,
      ShareBox,
      UserCard,
      HotVideos,
      HotImages
    }
  }
</script>

<style lang="less">
  body {
    min-width: 1220px;
  }

  .container {
    width: 1170px;
    margin: 0 auto;
    margin-top: 16px;
    min-height: 1500px;

    .index-left {
      width: 110px;
      min-height: 300px;
      margin-right: 30px;
      background-color: #fff;
    }
    .index-middle {
      width: 660px;
    }
    .index-right {
      width: 340px;

      .right-img {
        padding: 20px;
        margin-bottom: 16px;
        background-color: #f4f5f6;
      }

      #imagindexhover {
        display: none;
        background-color: #fff;
      }
    }
  }

  .toolbar {
    position: fixed;
    bottom: 36px;
    left: 50%;
    margin-left: 588px;

    i {
      vertical-align: middle;
    }
  }
</style>



// WEBPACK FOOTER //
// App.vue?1bbffa7a
